<template>
	<view>
		<view class="product_top" id="product_top">
			<view class="searchs">
				<view class="search">
					<view class="img" @click="back()">
						<image src="@/static/images/home_ico_more@2x.png" mode="widthFix"></image>
					</view>
					<input class="uni-input" type="search" placeholder="五常大米">
					<image src="../../../static/images/mall_ico_serch@3x.png" class="su" mode="widthFix"></image>
				</view>
				<view class="rte">
					<image src="../../../static/images/nav_ico_shoppingcar@3x.png" mode="widthFix"></image>
					<image src="../../../static/images/nav_ico_dingdan@3x.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="product_list">
				<scroll-view class="top-menu-view" scroll-x="true">
					<view class="menu-topic-view" v-for="(item,index) in cationList" :id="'tabNum'+item.id" :key="index" @click="swichMenu(index)">
						<view :class="currentTab==index ? 'menu-topic-act' : 'menu-topic'">
							<image :src="item.images" mode="widthFix"></image>
							<text class="menu-topic-text">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="classification" @tap="cation">
					<u-icon name="list-dot" size="20"></u-icon>
					<text>分类</text>
				</view>
			</view>
		</view>
		
		<view class="pro_cont">
			<view class="pro_cont_lt">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view 
						class="scroll-view-item"
						:class="sItemIndex == index?'active':''"
						v-for="(item,index) in sets" 
						:key="item.id"
						@tap="btn(index)"
					>
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view class="pro_cont_rt">
				<proContRt :dataList='dataList' :proDatas='proDatas'></proContRt>
			</view>
		</view>
		
	</view>
</template>

<script>
	import proContRt from '@/components/proContRt.vue'
	export default {
		data() {
			return {
				sItemIndex:1,
				scrollTop:0,
				currentTab:0,
				winheight:0,
				dataList: [//轮播图模拟数据
				  {url:'https://cdn.uviewui.com/uview/swiper/swiper2.png'},
				  {url:'https://cdn.uviewui.com/uview/swiper/swiper3.png'},
				  {url:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}
				],
				proDatas:[
					{
						id:1,
						images:require('../../../static/images/17.jpg'),
						limit:0,
						title:'精品金枕榴莲约5斤/个',
						conction:'现切冷藏 口感爽脆 甜度高',
						newPrice:'19.9',
						oldPrice:'29.9'
					},{
						id:2,
						images:require('@/static/images/16.jpg'),
						limit:1,
						title:'妃子笑荔枝约500g',
						conction:'现切冷藏 口感爽脆 甜度高',
						newPrice:'19.9',
						oldPrice:'29.9'
					},{
						id:3,
						images:require('@/static/images/14.jpg'),
						limit:1,
						title:'精品金枕榴莲约5斤/个',
						conction:'现切冷藏 口感爽脆 甜度高',
						newPrice:'19.9',
						oldPrice:'29.9'
					},{
						id:4,
						images:require('@/static/images/15.jpg'),
						limit:2,
						title:'妃子笑荔枝约500g',
						conction:'现切冷藏 口感爽脆 甜度高',
						newPrice:'19.9',
						oldPrice:'29.9'
					},{
						id:5,
						images:require('@/static/images/14.jpg'),
						limit:1,
						title:'精品金枕榴莲约5斤/个',
						conction:'现切冷藏 口感爽脆 甜度高',
						newPrice:'19.9',
						oldPrice:'29.9'
					},{
						id:6,
						images:require('@/static/images/15.jpg'),
						limit:2,
						title:'妃子笑荔枝约500g',
						conction:'现切冷藏 口感爽脆 甜度高',
						newPrice:'19.9',
						oldPrice:'29.9'
					}
				],
				sets:[
					{id:1,name:'时令水果'},
					{id:2,name:'肉蛋水产'},
					{id:3,name:'冷冻冷藏'},
					{id:1,name:'粮油调味'},
					{id:4,name:'乳饮酒水'},
					{id:5,name:'休闲食品'},
					{id:6,name:'日用百货'},
					{id:7,name:'个护美妆'},
					{id:8,name:'中外名酒'}
				],
				cationList:[
					{
						id:1,
						images:'../../../static/images/fenlei_ico_tuijian@2x.png',
						name:'推荐'
					},
					{
						id:2,
						images:'../../../static/images/jiuba.png',
						name:'时令水果'
					},
					{
						id:3,
						images:'../../../static/images/jsyd.png',
						name:'休闲食品'
					},
					{
						id:4,
						images:'../../../static/images/KTV.png',
						name:'粮油禽蛋'
					},
					{
						id:5,
						images:'../../../static/images/lrmf.png',
						name:'日用百货'
					},
					{
						id:6,
						images:'../../../static/images/ms.png',
						name:'推荐'
					}
				]
			}
		},
		onShow() {
			
			this.$nextTick(()=>{
				let _this = this;
				let a = document.getElementById('product_top')
				console.log(getComputedStyle(a).height, a)
				let info = uni.createSelectorQuery().in(this).select("#product_top");
				info.boundingClientRect(function(data) { 
						console.log("product_top高度",data)
						// _this.winheight = data.height
				}).exec(function(res){
					_this.winheight = res[0].height
				})
			})
		},
		filters:{
			su(data){
				let num = this.wHeight - data
				return num
			}
		},
		methods: {
			swichMenu(id) {
				this.currentTab = id
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			btn(id){
				this.sItemIndex = id
			},
			back(){
				uni.navigateBack()
			}
		},
		components:{
			proContRt
		}
	}
</script>

<style lang="scss">
.pro_cont{
	padding-top: 17rpx;
	height: calc(100vh - 136px);
	display: flex;
	.pro_cont_lt{
		width: 192rpx;
		background: #F4F4F4;
		.scroll-view-item{
			color: #666666;
			font-size: 27rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 119rpx;
			position: relative;
			&.active{
				background-color: #fff;
				color: #16843F;
				&::after{
					content: '';
					width: 8rpx;
					height: 100%;
					background: #16843F;
					position: absolute;
					z-index: 2;
					left: 0;
					top: 0;
				}
			}
		}
	}
	.pro_cont_rt{
		width: calc(100% - 192rpx);
	}
}	
.product_top{
	border-radius: 0rpx 0rpx 38rpx 38rpx;
	padding: 20rpx 26rpx;
	background: rgba(22,132,63,0.15);
	// filter: blur(50px);
	.product_list{
		display: flex;
		.classification{
			width: 115rpx;
			height:115rpx;
			background: #FFFFFF;
			box-shadow: -8rpx 0rpx 10rpx -10rpx rgba(0,0,0,0.5);
			line-height: 115rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}
		
	}
}	
.searchs{
	display: flex;
	justify-content: space-between;
	.rte{
		display: flex;
		line-height: 65rpx;
		align-items: center;
		image{
			width: 46rpx;
			margin-left: 36rpx;
		}
	}
}
.search{
	position: relative;
	margin: 15rpx 0 19rpx;
	width: 486rpx;
	// height: 65rpx;
	border-radius: 33rpx;
	border: 2rpx solid #16843F;
	margin-left: 50rpx;
	.img{
		image{
			width: 46rpx;
			transform: rotate(90deg);
		}
		position: absolute;
		left: -52rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	input{
		height: 65rpx;
		background: #FFFFFF;
		border-radius: 33rpx;
		font-size: 27rpx;
		color: #999999;
		padding: 0 32rpx;
	}
	.su{
		position: absolute;
		right: 32rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		width: 38rpx;
	}
}

.top-menu-view {
	display: flex;
	white-space: nowrap;
	text-align: center;
	width: calc(100% - 115rpx);
	.menu-topic-view {
		display: inline-block;
		white-space: nowrap;
		height: 86rpx;
		position: relative;
		margin-right: 40rpx;
		image{
			width: 86rpx;
			// height: 86rpx;
		}
		.menu-topic-text {
			font-size: 19rpx;
			color: #252525;
			padding: 2rpx 7rpx;
			display: block;
		}
		.menu-topic-act .menu-topic-text{
			color: #FFFFFF;
			// height: 31rpx;
			padding: 2rpx 7rpx;
			text-align: center;
			background: #16843F;
			border-radius: 15rpx;
		}
	}
}	
</style>
